<template>
  <div>
    <p>组件父子通信</p>
    <input type="text" v-model="content" />
    <input type="text" v-model="name" />
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  name: "component3",
  props: {
    // 属性text
    text: {
      type: String,
      required: false,
      default: ""
    },
    // 属性msg父亲双向绑定
    msg: {
      type: String
    }
  },
  // 父组件绑定v-model到属性msg
  model: {
    // 绑定对应属性
    prop: "msg",
    // 属性变化触发父亲的哪个事件
    event: "onCallback"
  },
  data() {
    return {
      content: this.text,
      name: this.msg
    };
  },
  methods: {
    submit() {
      this.$emit("contentSubmit", this.content);
      // 触发一个事件
      this.$emit("onCallback", this.name);
    }
  }
};
</script>
<style lang="stylus" scoped></style>
